<template>
  <div class="index-container">
    <button @click="handleClick" :disabled="isLoading">
      {{ isLoading ? "loading" : "submit" }}
    </button>
    <div class="error">{{ error }}</div>
  </div>
</template>

<script>
export default {
  props: {
    submit: Function,
  },
  data: () => ({
    count: 0, //点击的次数
    isLoading: false,
    error: "",
  }),
  methods: {
    async handleClick() {
      this.count++;
      this.error = "";
      this.isLoading = true;

      // 第一种
      // this.$emit("submit", this.count, ()=>{});

      // 第二种
      //   if (this.$listeners.submit) {
      //     // 直接使用父组件方法
      //     const result = await this.$listeners.submit(this.count);
      //   }

      // 第三种
      if (this.submit) {
        const result = await this.submit();
      }
    },
  },
};
</script>

<style lang='less' scoped>
.error {
  color: #f40;
  font-size: 12px;
}
</style>
